<template>
	<view class="game-container">
		<h1>儿童英语学习游戏</h1>

		<!-- 游戏开始按钮 -->
		<view v-if="!isGameStarted && !isGameOver" class="start-container">
			<button @click="startGame">开始游戏</button>
		</view>

		<!-- 游戏内容 -->
		<view v-if="isGameStarted && !isGameOver" class="game-content">
			<view class="word-container">
				<h2>请点击正确的单词：</h2>
				<image :src="currentWord.imageUrl" class="word-image"></image>
			</view>

			<view class="options-container">
				<view v-for="(option, index) in options" :key="index" class="option" @click="checkAnswer(option)">
					<p>{{ option.word }}</p>
				</view>
			</view>

			<view class="score-container">
				<p>分数: {{ score }}</p>
			</view>

			<view class="timer-container">
				<p>剩余时间: {{ timer }} 秒</p>
			</view>
		</view>

		<!-- 游戏结束 -->
		<view v-if="isGameOver" class="game-over">
			<p>游戏结束！你的得分是: {{ score }}</p>
			<button @click="restartGame">重新开始</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			words: [
				{ word: 'Apple', audio: '/static/audio/apple.mp3', imageUrl: '/static/images/apple.png' },
				{ word: 'Banana', audio: '/static/audio/banana.mp3', imageUrl: '/static/images/banana.png' },
				{ word: 'Cat', audio: '/static/audio/cat.mp3', imageUrl: '/static/images/cat.jpg' },
				{ word: 'Dog', audio: '/static/audio/dog.mp3', imageUrl: '/static/images/dog.jpg' },
				{ word: 'Elephant', audio: '/static/audio/elephant.mp3', imageUrl: '/static/images/elephant.jpg' }
			],
			currentWordIndex: 0,
			score: 0,
			isGameStarted: false,
			isGameOver: false,
			timer: 30, // 30秒倒计时
			timerInterval: null,
			options: []
		};
	},
	computed: {
		currentWord() {
			return this.words[this.currentWordIndex];
		}
	},
	methods: {
		startGame() {
			this.score = 0;
			this.currentWordIndex = 0;
			this.isGameStarted = true;
			this.isGameOver = false;
			this.timer = 30;
			this.startTimer();
			this.generateOptions();
			console.log('游戏开始！');
		},

		startTimer() {
			this.timerInterval = setInterval(() => {
				if (this.timer > 0) {
					this.timer--;
				} else {
					this.endGame();
				}
			}, 1000);
		},

		generateOptions() {
			// 随机生成4个选项，其中一个是正确答案
			const options = [this.currentWord];
			while (options.length < 4) {
				const randomWord = this.words[Math.floor(Math.random() * this.words.length)];
				if (!options.includes(randomWord)) {
					options.push(randomWord);
				}
			}
			this.options = options.sort(() => Math.random() - 0.5);
		},

		checkAnswer(option) {
			if (option === this.currentWord) {
				this.score += 10;
			} else {
				this.score -= 5;
			}
			this.moveToNextWord();
		},

		moveToNextWord() {
			if (this.currentWordIndex < this.words.length - 1) {
				this.currentWordIndex++;
				this.generateOptions();
			} else {
				this.endGame();
			}
		},

		endGame() {
			clearInterval(this.timerInterval);
			this.isGameOver = true;
		},

		restartGame() {
			this.startGame();
		}
	}
};
</script>

<style scoped>
.game-container {
	text-align: center;
	padding: 20px;
	background-color: #e3f2fd; /* 蓝色背景 */
	min-height: 100vh;
}

h1 {
	font-size: 36px;
	color: #42a5f5; /* 蓝色标题 */
	margin-bottom: 20px;
}

.start-container {
	margin-top: 20px;
}

button {
	background-color: #42a5f5; /* 蓝色按钮 */
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

button:hover {
	background-color: #1e88e5; /* 深蓝色悬停效果 */
}

.word-container {
	margin-top: 20px;
}

.word-image {
	width: 150px;
	height: 150px;
	margin: 10px 0;
	border-radius: 10px;
}

.options-container {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.option {
	background-color: #ffffff; /* 白色背景 */
	margin: 10px;
	padding: 10px;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.3s;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.option:hover {
	background-color: #bbdefb; /* 浅蓝色悬停效果 */
}

.score-container {
	margin-top: 20px;
	font-size: 18px;
	color: #333;
}

.timer-container {
	margin-top: 20px;
	font-size: 18px;
	color: #333;
}

.game-over {
	margin-top: 20px;
	font-size: 18px;
	font-weight: bold;
	color: #d32f2f; /* 红色文本 */
}

.game-over button {
	background-color: #ff5722; /* 橙色按钮 */
}

.game-over button:hover {
	background-color: #e64a19; /* 深橙色悬停效果 */
}
</style>
